<!--
类型: 默认插槽, 具名插槽, 作用域插槽
作用域插槽: 
数据在子组件中, 但根据数据生成的结构, 却由父组件决定. 
数据存在访问作用域问题.
作用域插槽也可以由名字.
-->
<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Game>
        <template #g1="params">
          <!-- <span> {{ params }}</span> -->
          <ul>
            <li v-for="g in params.games" :key="g.id">
              {{ g.name }}
            </li>
          </ul>
        </template>
      </Game>

      <Game>
        <template v-slot:g1="params">
          <ol>
            <li v-for="item in params.games" :key="item.id">
              {{ item.name }}
            </li>
          </ol>
        </template>
      </Game>

      <Game>
        <template #g1="{games}">
          <h3 v-for="item in games" :key="item.id">
            {{ item.name }}
          </h3>
        </template>
      </Game>
    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
import Game from './Game.vue';
</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .content {
    display: flex;
    justify-content: space-evenly;
  }
  img, video {
    width: 100%;
  }
  h2 {
    background-color: orange;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
  }
</style>